import React from 'react';
import { Card, Row, Col, Slider, Switch, Select, Button, Badge, Space, Progress, Tag, Timeline, Divider, Tooltip } from 'antd';
import { 
  HomeOutlined, RobotOutlined, AlertOutlined, HeartOutlined,
  EnvironmentOutlined, BugOutlined, ExperimentOutlined, SafetyCertificateOutlined,
  BulbOutlined, ThunderboltOutlined, CloudOutlined, SoundOutlined,
  ClockCircleOutlined, SettingOutlined, CheckCircleOutlined, CloseCircleOutlined,
  InfoCircleOutlined, WarningOutlined, BellOutlined, CheckOutlined,
  CameraOutlined, VideoCameraOutlined, AimOutlined, ScheduleOutlined,
  DashboardOutlined, AreaChartOutlined, PieChartOutlined, LineChartOutlined
} from '@ant-design/icons';
import styled from 'styled-components';

const Container = styled.div`
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
`;

const StyledCard = styled(Card)`
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  
  .ant-card-head {
    background: linear-gradient(45deg, #002FA7 0%, #1A237E 100%);
    border-radius: 8px 8px 0 0;
    .ant-card-head-title {
      color: white;
    }
  }

  &:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
  }
`;

const StatusBadge = styled(Badge)`
  .ant-badge-status-dot {
    width: 8px;
    height: 8px;
  }
`;

const ScrollContainer = styled(Container)`
  padding: 24px 15%;
  overflow-y: auto;
  
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 47, 167, 0.2);
    border-radius: 4px;
  }
`;

const ModuleRow = styled(Row)`
  margin-bottom: 48px;
  width: 100%;
  
  &:hover {
    transform: translateY(-5px);
    transition: all 0.5s ease;
  }
`;

const ControlPanel: React.FC = () => {
  return (
    <ScrollContainer>
      {/* 家电互联 */}
      <ModuleRow>
        <Col span={24}>
          <StyledCard 
            title={<Space><HomeOutlined /> 家电互联</Space>}
            extra={<Space><BellOutlined /><SettingOutlined /></Space>}
          >
            <Row gutter={[24, 24]}>
              <Col span={12}>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div><BulbOutlined /> 智能台灯</div>
                  <Slider defaultValue={30} />
                  <Space split={<Divider type="vertical" />}>
                    <Tooltip title="色温"><Button icon={<DashboardOutlined />} /></Tooltip>
                    <Tooltip title="定时"><Button icon={<ClockCircleOutlined />} /></Tooltip>
                    <Tooltip title="场景"><Button icon={<CameraOutlined />} /></Tooltip>
                  </Space>
                </Space>
              </Col>
              <Col span={12}>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div><ThunderboltOutlined /> 空调控制</div>
                  <Select
                    style={{ width: '100%' }}
                    defaultValue="auto"
                    options={[
                      { value: 'auto', label: '自动模式' },
                      { value: 'cool', label: '制冷模式' },
                      { value: 'heat', label: '制热模式' },
                      { value: 'dry', label: '除湿模式' },
                      { value: 'fan', label: '送风模式' },
                    ]}
                  />
                  <Space>
                    <Button>26°C</Button>
                    <Button icon={<SoundOutlined />}>静音</Button>
                    <Button icon={<ScheduleOutlined />}>定时</Button>
                  </Space>
                </Space>
              </Col>
              <Col span={24}>
                <Progress 
                  percent={75} 
                  success={{ percent: 30 }}
                  format={() => '75% 设备在线'}
                />
                <div style={{ marginTop: 8 }}>
                  <Tag icon={<CheckCircleOutlined />} color="success">电视已连接</Tag>
                  <Tag icon={<CheckCircleOutlined />} color="success">冰箱已连接</Tag>
                  <Tag icon={<WarningOutlined />} color="warning">洗衣机离线</Tag>
                </div>
              </Col>
            </Row>
          </StyledCard>
        </Col>
      </ModuleRow>

      {/* 垃圾清扫 */}
      <ModuleRow>
        <Col span={24}>
          <StyledCard 
            title={<Space><RobotOutlined /> 垃圾清扫</Space>}
            extra={<Tag color="processing">清扫中</Tag>}
          >
            <Row gutter={[24, 24]}>
              <Col span={8}>
                <Progress type="circle" percent={30} />
                <div style={{ textAlign: 'center', marginTop: 8 }}>清扫进度</div>
              </Col>
              <Col span={16}>
                <Space direction="vertical" style={{ width: '100%' }}>
                  <Tag color="blue">当前区域: 客厅 (30m²)</Tag>
                  <Select
                    style={{ width: '100%' }}
                    defaultValue="auto"
                    options={[
                      { value: 'auto', label: '自动模式' },
                      { value: 'spot', label: '定点清扫' },
                      { value: 'edge', label: '沿边清扫' },
                      { value: 'zigzag', label: 'Z字形清扫' },
                      { value: 'deep', label: '深度清扫' },
                    ]}
                  />
                  <Space>
                    <Button type="primary" icon={<RobotOutlined />}>开始清扫</Button>
                    <Button icon={<AimOutlined />}>指定区域</Button>
                    <Button icon={<ScheduleOutlined />}>定时任务</Button>
                  </Space>
                </Space>
              </Col>
              <Col span={24}>
                <Timeline items={[
                  { color: 'green', children: '完成客厅清扫 - 10分钟前' },
                  { color: 'blue', children: '开始卧室清扫 - 5分钟前' },
                  { color: 'gray', children: '等待清扫厨房' },
                ]} />
              </Col>
            </Row>
          </StyledCard>
        </Col>
      </ModuleRow>

      {/* 墙面清洁 */}
      <ModuleRow>
        <Col span={24}>
          <StyledCard title={<Space><BugOutlined /> 墙面清洁</Space>}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <div>清洁区域选择</div>
              <Select
                mode="multiple"
                style={{ width: '100%' }}
                placeholder="选择区域"
                defaultValue={['kitchen']}
                options={[
                  { value: 'kitchen', label: '厨房' },
                  { value: 'bathroom', label: '浴室' },
                  { value: 'living', label: '客厅' },
                ]}
              />
              <Timeline items={[
                { color: 'green', children: '上次清洁: 2小时前' },
                { color: 'blue', children: '下次清洁: 明天 09:00' },
              ]} />
            </Space>
          </StyledCard>
        </Col>
      </ModuleRow>

      {/* 整理收纳 */}
      <ModuleRow>
        <Col span={24}>
          <StyledCard title={<Space><EnvironmentOutlined /> 整理收纳</Space>}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Progress type="circle" percent={88} width={80} />
              <div>物品归类进度</div>
              <Button.Group style={{ width: '100%' }}>
                <Button type="primary" block>开始整理</Button>
                <Button>暂停</Button>
              </Button.Group>
            </Space>
          </StyledCard>
        </Col>
      </ModuleRow>

      {/* 宠物喂养 */}
      <ModuleRow>
        <Col span={24}>
          <StyledCard title={<Space><ExperimentOutlined /> 宠物喂养</Space>}>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Progress type="circle" percent={65} />
                <div>粮食储量</div>
              </Col>
              <Col span={12}>
                <Timeline items={[
                  { children: '上次投食: 2小时前' },
                  { children: '下次投食: 18:00' },
                ]} />
              </Col>
            </Row>
          </StyledCard>
        </Col>
      </ModuleRow>

      {/* 植物浇灌 */}
      <ModuleRow>
        <Col span={24}>
          <StyledCard title={<Space><SafetyCertificateOutlined /> 植物浇灌</Space>}>
            <Row gutter={[16, 16]}>
              <Col span={8}>
                <Progress type="dashboard" percent={45} />
                <div>土壤湿度</div>
              </Col>
              <Col span={16}>
                <Select style={{ width: '100%', marginBottom: 16 }} 
                  defaultValue="auto"
                  options={[
                    { value: 'auto', label: '自动浇灌' },
                    { value: 'manual', label: '手动控制' },
                  ]}
                />
                <Button type="primary" block>立即浇水</Button>
              </Col>
            </Row>
          </StyledCard>
        </Col>
      </ModuleRow>

      {/* 安全监控 */}
      <ModuleRow>
        <Col span={24}>
          <StyledCard title={<Space><AlertOutlined /> 安全监控</Space>}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Tag color="success">系统状态: 正常运行中</Tag>
              <Progress percent={100} size="small" status="active" />
              <Button.Group style={{ width: '100%' }}>
                <Button type="primary">查看监控</Button>
                <Button danger>紧急停止</Button>
              </Button.Group>
            </Space>
          </StyledCard>
        </Col>
      </ModuleRow>

      {/* 情绪检测 */}
      <ModuleRow>
        <Col span={24}>
          <StyledCard title={<Space><HeartOutlined /> 情绪检测</Space>}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Progress type="circle" percent={85} strokeColor="#52c41a" />
              <div>当前状态: 愉悦</div>
              <Timeline items={[
                { color: 'green', children: '10:00 平静' },
                { color: 'blue', children: '12:00 专注' },
                { color: 'green', children: '14:00 愉悦' },
              ]} />
            </Space>
          </StyledCard>
        </Col>
      </ModuleRow>
    </ScrollContainer>
  );
};

export default ControlPanel;
